<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="重置密码" left-arrow fixed  @click-left="$router.back()"/>
    <!-- 导航栏 end -->

    <!-- 内容 -->
    <div class="user">
      <van-form @submit="onSubmit" class="form">
        <van-field v-model="postData.phone" size="large" name="绑定手机号" placeholder="请输入绑定的手机号" :rules="[{ required: true, message: '请填写绑定的手机号' }]" style="font-size: 16px" />
        <van-field v-model="postData.vcode" center clearable placeholder="请输入验证码" style="font-size: 16px">
          <template #button>
            <van-button size="small" type="primary" class="yzm" :disabled="codeBtnEnabel" native-type="button" @click="onYzm">{{codeBtnTitle}}</van-button>
          </template>
        </van-field>
        <van-field v-model="postData.password" size="large" type="password" name="密码" placeholder="请输入新密码" :rules="[{ required: true, message: '请填写新密码' }]" style="font-size: 16px" />
        <van-field v-model="password2" size="large" type="password" name="密码" placeholder="请确认新密码" :rules="[{ required: true, message: '请填写新密码' }]" style="font-size: 16px" />
        <div class="btns">
          <van-button round block type="info" native-type="submit" :loading="subLoading">确定重置</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { NavBar, Form, Field, Button, Toast, Dialog } from "vant";
import MyMixin from '@/mixin/MyMixin';
import { mixin_validate } from '@/mixin/mixins';
export default {
  name: "CompanyForget",
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  // 定义属性
  data() {
    return {
			//loading
			subLoading:false,
			vcodeLoading:false,
			//postData
			postData:{
				phone:'',
				vcode:'',
				password:'',
			},
			//other
			codeBtnTitle:'获取验证码',
			codeBtnEnabel:false,
			password2:'',
      checked: false,
    };
  },
	mixins:[mixin_validate],
  // 方法集合
  methods: {
		onSubmit(){
			this.subLoading = true;
			this.$api.post('/CompanyAccount/ResetPwd',this.postData).then(res=>{
				this.subLoading=false;
				if(res.success){
					Dialog({title:'密码修改成功',message:'使用新密码登录'}).then(()=>{this.$router.back()})
				}
				else{Toast(res.msg)}
			})
		},
		onYzm(){
      if (!this.validate_phone.test(this.postData.phone)) {
        Toast("手机号格式不正确");
        return;
      }
      this.vcodeLoading = true;
      this.$api.get("/CompanyAccount/SendPhoneCode", { mobileNum: this.postData.phone }).then((res) => {
				this.vcodeLoading = false;
        Toast(res.msg);
        if (res.success) {
          this.getYZMSuccess();
        }
      });
		},
		//验证码倒计时
    getYZMSuccess() {
      let count = 60;
      let timmer = setInterval(() => {
        this.codeBtnTitle = `${count}s`;
        this.codeBtnEnabel = true;
        count--;
        if (count < 0) {
          this.codeBtnTitle = "获取验证码";
          this.codeBtnEnabel = false;
          clearInterval(timmer);
        }
      }, 1000);
    },
	},
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>